Styling the Selected Button of a ButtonBar (Flex 3 vs Gumbo)

Styling the ‘selected’ button for a Flex ButtonBar in Flex 3 isn’t that straightforward, in my opinion. You need to write some code on the itemClick handler to cycle through the buttons of the ButtonBar to see if each button is selected or not. If it is selected, set some styles. If its not selected, set some other styles. The code will look something like this:

private function changeHandler(): void
{
for(var i:int=0; i < bb.dataProvider.length; i++)
{
var button1:Button = Button(bb.getChildAt(i));
if(button1.selected)
{
button1.styleName=”selectedStyle”;
}
else
{
button1.styleName=”unselectedStyle”;
}
}

}

You can view the example code and check out the swf here:

Flex 3 Sample code: ButtonBar_selectedStyle.mxml

Flex 3 Sample swf: ButtonBar_selectedStyle.swf

In Flex 4, styling just the selected button of a Gumbo ButtonBar is much easier using a combination of the new Advanced CSS selector types: descendant and pseudo selectors.  With descendant selectors, you can specify a style for any child of a given parent type (at any level). For example, for a ToggleButton in a ButtonBar, we are going to use:

FxButtonBar FxToggleButton { someStyle: #598800; }

The selector above will affect all the FxToggleButtons that are children of FxButtonBars. Since we only want to change buttons in a selected state, we will use the pseudo selector which you use with Gumbo states. To see what states you can reference for the FxToggleButtons, you can look at its skin FxToggleButtonSkin. In the skin, you have the following states:

<states>
<State name=”up” />
<State name=”over” stateGroups=”overStates” />
<State name=”down” stateGroups=”downStates” />
<State name=”disabled” stateGroups=”disabledStates” />
<State name=”upAndSelected” stateGroups=”selectedStates, selectedUpStates” />
<State name=”overAndSelected” stateGroups=”overStates, selectedStates” />
<State name=”downAndSelected” stateGroups=”downStates, selectedStates” />
<State name=”disabledAndSelected” stateGroups=”selectedUpStates, disabledStates, selectedStates” />
</states>

So, using  a pseudo selector, you can set styles associated with any of these states using a “:” before a state. We will create the following CSS Selector:

FxButtonBar FxToggleButton:upAndSelected,
FxButtonBar FxToggleButton:overAndSelected,
FxButtonBar FxToggleButton:downAndSelected{
baseColor: #FF9933;
}

That is all you need to do to style the selected button of a Gumbo ButtonBar. You don’t have to write any Actionscript (as in Flex 3). You can just use a CSS selector. Ah the beauty of easier styling in Flex 4!

Flex 4 Sample code: FxButtonBar_selectedStyle.mxml

Flex 4 Sample swf: FxButtonBar_selectedStyle.swf

To find out more about the new Advanced CSS Selectors, check out the spec on opensource.adobe.com.